<template>
  <el-drawer direction="rtl" v-model="dialogVisible" :title="dialogTitle" size="70%">
    <ContentWrap>
      <el-tabs>
        <el-tab-pane label="电费收支总览">
          <OwnPayElecDayReport :own-member-user-id="ownMemberUserId" />
        </el-tab-pane>
        <el-tab-pane label="电费订单" lazy>
          <OwnPayElecCharge :own-member-user-id="ownMemberUserId" />
        </el-tab-pane>
      </el-tabs>
    </ContentWrap>
  </el-drawer>
</template>
<script lang="ts" setup>
import OwnPayElecCharge from './OwnPayElecCharge.vue'
import OwnPayElecDayReport from './OwnPayElecDayReport.vue'
defineOptions({ name: 'OwnMeterDetail' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const ownMemberUserId = ref()

/** 打开弹窗 */
const open = async (ownMemberUserIdT: number) => {
  dialogVisible.value = false
  nextTick(() => {
    ownMemberUserId.value = ownMemberUserIdT
    dialogTitle.value = '账户应用信息'
    dialogVisible.value = true
  })
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
